<template>
	<view class="pageview">
		<cl-navbar leftIconSize="40rpx" autoBack placeholder :title="type == 'top'?$t('chat.msg.pinMessage'):$t('chat.msg.quoteMessage')"> </cl-navbar>
		<view class="contentview" v-if="chatTopMsg">
			<view class="content" v-if="chatTopMsg.msg_type == 'text'">
				<rich-text :nodes="messageText(chatTopMsg.content_text[0].text.content)" :selectable="false"
					style="-webkit-touch-callout: none;white-space: pre-wrap;overflow-wrap: break-word;color:#333333"
					@itemclick="atClick"></rich-text>
			</view>

			<view class="content other" v-else-if="chatTopMsg.msg_type == 'mixed'">
				<cl-chat-img-video :imgList="mediaAttachments" isChat width="690" maxWidth="690" maxHeight="1800"
				v-if="mediaAttachments.length!=0"></cl-chat-img-video>
				<view v-for="(attachment, arrindex) in chatTopMsg.content_text" :key="arrindex">
					<view v-if="attachment.text" style="margin: 15rpx 10rpx;">
						<rich-text :nodes="messageText(attachment.text.content)" :selectable="false"
							style="-webkit-touch-callout: none;white-space: pre-wrap;overflow-wrap: break-word;color:#333333"></rich-text>
					</view>
				</view>
			</view>
			<view class="content other" v-else-if="chatTopMsg.msg_type == 'image'">
				<cl-chat-img-video :imgList="chatTopMsg.content_text" isChat  width="690" maxWidth="690" maxHeight="1800"></cl-chat-img-video>
			</view>
			<view class="content other" v-else-if="chatTopMsg.msg_type == 'video'">
				<cl-chat-img-video :imgList="chatTopMsg.content_text" isChat  width="690" maxWidth="690" maxHeight="1800"></cl-chat-img-video>
			</view>
			<view class="content other" v-else-if="chatTopMsg.msg_type == 'b_c'">
				<view class="cardview" @click="mingpian">
					<view class="cardview__top">
						<cl-avatar :src="chatTopMsg.content_text[0].b_c.avatar_url" size="80rpx"></cl-avatar>
						<text
							class="cardview__top__nickname u-line-1">{{chatTopMsg.content_text[0].b_c.nick_name}}</text>
					</view>
					<view style="width: 100%;height: 2rpx;margin: 15rpx 0 5rpx;background-color: #ebebeb;">
					</view>
					<text class="cardview__bottom">
						{{chatTopMsg.content_text[0].b_c.type == 'private'?$t('chat.msg.type.personalCard'):chatTopMsg.content_text[0].b_c.type == 'group'?$t('chat.msg.type.groupCard'):$t('chat.msg.type.otherCard')}}
					</text>
				</view>
			</view>
			<view class="content" v-else-if="chatTopMsg.msg_type == 'audio'">
				<cl-chat-audio :audiodata="chatTopMsg.content_text[0].audio" :isme="false"
					:msg_id="chatTopMsg.msg_id"></cl-chat-audio>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		v4 as uuidv4
	} from 'uuid';
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		replaceEmojis
	} from '@/components/cl-chat-input/o-emoji/emoji.js';
	export default {
		name: 'groupChatTop',
		data() {
			return {
				chat_type:'',
				chatTopMsg:null,
				type:'top'
			};
		},
		computed: {
			...mapState({
				user_info: state => state.user.user_info,
				chatInfo: state => state.chat.chatInfo,
				chatGroupInfo: state => state.chat.chatGroupInfo
			}),
			getPermission() {
				return (type) => {
					if (this.chatGroupInfo == null || this.chatGroupInfo.mygroup == '0') return false
					// 0所有人 1普通用户 2管理员 3都不允许
					if (this.chatGroupInfo[type] == '0') {
						return true
					} else if (this.chatGroupInfo[type] == '1') {
						if (this.chatGroupInfo.userRole && this.chatGroupInfo.userRole != 'manager') return true
					} else if (this.chatGroupInfo[type] == '2') {
						if (this.chatGroupInfo.userRole && this.chatGroupInfo.userRole != 'member') return true
					} else if (this.chatGroupInfo[type] == '3') {
						if (this.chatGroupInfo.userRole && this.chatGroupInfo.userRole == 'creator') return true
					}
					return false
				}
			},
			mediaAttachments() {
				return this.chatTopMsg.content_text.filter(a => a.image || a.video);
			},
			messageText() {
				return (text) => {
					return replaceEmojis(text)
				}
			},
		},
		async onLoad() {
			let query = this.$Route.query
			
			this.chat_type = query.chat_type
			this.chatTopMsg = query.chatTopMsg
			if(query.type)this.type = query.type
			
		},
		methods: {
			atClick(e) {
				if(this.chat_type == 'private')return
				uni.$u.throttle(async () => {
					if (e.target.node.name == 'a' && e.target.node.atid) {
						if (e.target.node.atid == this.$store.state.user.user_info.user_id || e.target.node
							.atid == 'all') {
							return
						}

						if (!this.getPermission('can_add_friends')) {
							uni.showToast({
								title: this.$t("group.group_members.memberBeingProtected"),
								icon: 'none'
							})
							return
						}
						try {
							let friendRes = await uni.$api.friends.isFriend({
								friend_id: e.target.node.atid
							})
							if (friendRes && friendRes.data.is_friend) {
								this.$Router.push({
									name: 'friend_details',
									params: {
										friend_idx: e.target.node.atid,
										skipAgain: true, //再次进入聊天页面,
										groupNickname: e.target.node.atname,
									}
								});
								return
							}
						} catch (e) {}
						this.$Router.push({
							name: 'add_member_details',
							params: {
								user_id: e.target.node.atid,
								isGroupGo: true,
								groupNickname: e.target.node.atname,
							}
						});
					}
				}, 1000)
			},
			async mingpian() {
				uni.$u.throttle(async () => {
					let {
						card_user_id,
						nick_name,
						avatar_url,
						type
					} = this.chatTopMsg.content_text[0].b_c
					if (type == 'private') {
						if (card_user_id == this.$store.state.user.user_info.user_id) {
							return
						}
						//如果是群聊并且不允许添加好友
						if (this.chat_type == 'group' && !this.getPermission('can_add_friends')) {
							uni.showToast({
								title: this.$t("group.group_members.memberBeingProtected"),
								icon: 'none'
							})
							return
						}
						try {
							let friendRes = await uni.$api.friends.isFriend({
								friend_id: card_user_id
							})
							if (friendRes && friendRes.data.is_friend) {
								this.$Router.push({
									name: 'friend_details',
									params: {
										friend_idx: card_user_id,
										avatar_url: avatar_url,
										nick_name: nick_name,
										skipAgain: true, //再次进入聊天页面
									}
								});
								return
							}
						} catch (e) {}
						this.$Router.push({
							name: 'add_member_details',
							params: {
								user_id: card_user_id,
								nick_name: nick_name,
								avatar_url: avatar_url,
								isGroupGo: this.chat_type == 'group'?true:false
							}
						});
					}
				}, 1000)
			},
		}
	};
</script>
<style scoped lang="scss">
	::v-deep {
		.u-navbar--fixed{
			border-bottom: 1rpx solid #e1e1e1;
		}
	}
	.pageview{
		padding: 30rpx;
		box-sizing: border-box;
	}
	.cardview {
		width: 400rpx;
		padding: 15rpx 15rpx 10rpx;
	
		&__top {
			display: flex;
			align-items: center;
	
			&__nickname {
				margin-left: 15rpx;
				font-size: 28rpx;
			}
		}
	
		&__bottom {
			font-size: 20rpx;
			color: #61626e;
		}
	}
	.contentview {
		display: flex;

		.content {
			padding: 20rpx;
			border-radius: 15rpx;
			font-size: 32rpx;
			background: #ffffff;
			align-self: self-start;

			&.other {
				padding: 3rpx;
				margin: 0;
			}
		}

		.statusview {
			align-self: self-end;
		}
	}
</style>